<template>
    <div>
        <TopNav title="我的跟帖"/>
        <div class="list">
            <div class="item" v-for="comment in commentList" :key="comment.id">
                <div class="date">2020-10-01</div>
                <div class="parentWrapper" v-if="comment.parent">
                    <div class="info">
                        回复 {{comment.parent.user.nickname}}
                    </div>
                    <div class="parentContent">
                        {{comment.parent.content}}
                    </div>
                </div>
                <div class="mainComment">
                    {{comment.content}}
                </div>
                <div class="originPost">
                    原文: {{comment.post.title}}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import TopNav from "../../components/TopNav";
    export default {
        components: {
            TopNav,
        },
        data() {
            return {
                commentList: []
            }
        },
        created() {
            this.$axios({
                url: '/user_comments'
            }).then(res=>{
                console.log(res.data);
                this.commentList = res.data.data
            })
        }
    };
</script>

<style lang="less" scoped>
.item {
    padding: 16/360*100vw;
    border-bottom: 1px solid #e4e4e4;
    .date {
        font-size: 12/360*100vw;
        color: #888;
        padding-bottom: 10/360*100vw;
    }
    .parentWrapper {
        background: #e4e4e4;
        padding: 16/360*100vw;
        .info {
            font-size: 14/360*100vw;
            color: #999;
        }
        .parentContent {
            margin-top: 10/360*100vw;
            color: #888;
            font-size: 16/360*100vw;
        }
    }
    .mainComment {
        font-size: 16/360*100vw;
        margin: 10/360*100vw 0;
    }
    .originPost {
        font-size: 14/360*100vw;
        color: #888;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
</style>